/**
 * 领导驾驶舱
 */

Ext.define('Module.sjfx.LeadDriving',{
	extend : 'Ext.panel.Panel',
	border: true,
	autoScroll:true,
	bodyStyle:{background:'rgb(219, 242, 239)'},
	layout:'column',
	initComponent : function() {
		var me = this;
		me.defaults = {columnWidth:1,padding:5};
		
		me.items = [Ext.create("Module.ldjscharts.TodayCharts"),/*今日图表*/
		            Ext.create("Module.ldjscharts.WeekCharts"), /*本周图表*/
		            Ext.create("Module.ldjscharts.MonthCharts"), /*本月图表*/
		            me.taskChart(),me.workChart()];
		me.callParent();
	},
	taskChart:function(){
		var me = this;
		return Ext.create("Ext.panel.Panel",{
			title:Ext.Date.format(new Date(), 'Y')+'年巡视任务图表信息',
			height:300,
			columnWidth:1/2,
			layout:'fit',
			items:[{
				xtype:'chart',
				animate: true,
				border: true,
				height: 400,
				shadow: true,
				store: Ext.create('Ext.data.Store', {
					fields: ['counts', 'month','flv'],
					autoLoad: true,
					proxy: {
						type: 'ajax',
						url: 'sjfx/LeadDrivingAction/getXschart.do',
						reader: {
							type: 'json',
						}
					} 
				}),
				legend: {
					position: 'right'
				},
				axes: [{
					type: 'Numeric',
					position: 'left',
//					label: {
//						renderer: Ext.util.Format.numberRenderer('0,0')
//					},
					title: '数量',
					majorTickSteps: 3,
					minorTickSteps: 10,
					fields:['counts'],
					grid: true,
					minimum: 0
				},
				{
					type: 'Category',
					position: 'bottom',
					fields: ['month'],
					grid: true,
					label: {
						renderer: function(v) {
							return String(v)+'月';
						}
					},
					title: false
				},{
					type: 'Numeric',
					position: 'right',
					fields: ['flv'],
					title: '完成率（%）',
					label: {
						renderer: Ext.util.Format.numberRenderer('00')
					},
					minimum: 0, maximum: 100
				}],
				series: [{
					type: 'column',
					highlight: {
						size: 7,
						radius: 7
					},
					axis: 'left',
					xField: 'counts',
					yField: ['counts'],
					tips: {
						trackMouse: true,
						width: 100,
						height: 35,
						renderer: function(storeItem, item) {
							this.setTitle('数量: '+storeItem.get('counts'));
						}
					},
					markerConfig: {
						type: 'cross',
						size: 4,
						radius: 4,
						'stroke-width': 0
					}
				},
				{

					type: 'line',
					highlight: {
						size: 7,
						radius: 7
					},
					axis: 'right',
					xField: 'month',
					yField: ['flv'],
					tips: {
						trackMouse: true,
						width: 100,
						height: 35,
						renderer: function(storeItem, item) {
							this.setTitle('违规率: '+storeItem.get('flv')+'%');
						}
					},
					markerConfig: {
						type: 'cross',
						size: 4,
						radius: 4,
						'stroke-width': 0
					},
					style: {
						fill: '#18428E',
						stroke: '#18428E',
						'stroke-width': 3
					},
					markerConfig: {
						type: 'circle',
						size: 4,
						radius: 4,
						'stroke-width': 0,
						fill: '#18428E',
						stroke: '#18428E'
					}
				}]
			}]
		});
	},
	workChart:function(){
		var me = this;
		return Ext.create("Ext.panel.Panel",{
			title:Ext.Date.format(new Date(), 'Y')+'年工作任务图表信息',
			height:300,
			columnWidth:1/2,
			layout:'fit',
			items:[{
				xtype:'chart',
				animate: true,
				border: true,
				height: 400,
				shadow: true,
				store: Ext.create('Ext.data.Store', {
					fields: ['counts', 'month','flv'],
					autoLoad: true,
					proxy: {
						type: 'ajax',
						url: 'sjfx/LeadDrivingAction/getWorkchart.do',
						reader: {
							type: 'json',
						}
					} 
				}),
				legend: {
					position: 'right'
				},
				axes: [{
					type: 'Numeric',
					position: 'left',
//					label: {
//						renderer: Ext.util.Format.numberRenderer('0,0')
//					},
					majorTickSteps: 3,
					minorTickSteps: 10,
					title: '数量',
					fields:['counts'],
					grid: true,
					minimum: 0
				},
				{
					type: 'Category',
					position: 'bottom',
					fields: ['month'],
					grid: true,
					label: {
						renderer: function(v) {
							return String(v)+'月';
						}
					},
					title: false
				},{
					type: 'Numeric',
					position: 'right',
					fields: ['flv'],
					title: '完成率（%）',
					label: {
						renderer: Ext.util.Format.numberRenderer('00')
					},
					minimum: 0, maximum: 100
				}],
				series: [{
					type: 'column',
					highlight: {
						size: 7,
						radius: 7
					},
					axis: 'left',
					xField: 'counts',
					yField: ['counts'],
					tips: {
						trackMouse: true,
						width: 100,
						height: 35,
						renderer: function(storeItem, item) {
							this.setTitle('数量: '+storeItem.get('counts'));
						}
					},
					markerConfig: {
						type: 'cross',
						size: 4,
						radius: 4,
						'stroke-width': 0
					}
				},
				{
					type: 'line',
					highlight: {
						size: 7,
						radius: 7
					},
					axis: 'right',
					xField: 'month',
					yField: ['flv'],
					tips: {
						trackMouse: true,
						width: 100,
						height: 35,
						renderer: function(storeItem, item) {
							this.setTitle('完成率: '+storeItem.get('flv')+'%');
						}
					},
//					markerConfig: {
//					type: 'cross',
//					size: 4,
//					radius: 4,
//					'stroke-width': 0
//					},
					style: {
						fill: '#18428E',
						stroke: '#18428E',
						'stroke-width': 3
					},
					markerConfig: {
						type: 'circle',
						size: 4,
						radius: 4,
						'stroke-width': 0,
						fill: '#18428E',
						stroke: '#18428E'
					}
				}]
			}]
		});
	}
});